<template>
  <div class="seven_content myStyle">
    <div class="content_top">
      <StrokeTitle2 :isCenter="true" title="占比分析" class="float margin" style="width: 32.3%">
        <div class="flex_center" slot="select">
          <ElementRadio v-model="model" :isButton="true" :isZidingyi="false" @change="radioChange1" :options="[  {
            value: 'lastMonth', label: '上月' },{value: 'quarter',label: '当季'}]" />
          <ElementSelect ref="psNameSelect" :data="selectList" :isSelected="true" @select="selectList1" />
        </div>
        <PieImg5 legendLeft="60%" cirTop="0.3" :isTitle="true" length="5" itemWidth="0.84" cirLeft="0.8" style="height: 100%" :data="top1" :img="require('@/assets/images/echarts/7shangbiao.png')" slot="content" />
        <!-- <MoreRing legendLeft="58%" label="" length="5" labelLength="1" airLeft="17" imgLeft="1.1" itemWidth="1" imgWidth="1.2" :img="''" :data="top1" slot="content" /> -->
      </StrokeTitle2>
      <StrokeTitle2 :isCenter="true" title="近半年消耗率趋势" class="float margin" style="width: 32.3%">
        <div class="flex_center" slot="select">
          <ElementSelect ref="psNameSelect" :data="selectList" :isSelected="true" @select="selectList2" :isAll="false"/>
        </div>

        <NormalLine legendLeft="46%" :isTitle="true" length="5" itemWidth="0.84" cirLeft="0.7" :data="top2" slot="content" />
      </StrokeTitle2>
      <StrokeTitle2 :isCenter="true" title="生产效率" class="float margin" style="width: 32.4%">
        <div class="flex_center" slot="select">
          <ElementRadio v-model="model" :isZidingyi="false" :isButton="true" @change="radioChange3" :options="[  {
            value: 'lastMonth', label: '上月' },{value: 'quarter',label: '当季'}]" />
          <ElementSelect ref="psNameSelect" :data="selectList" :isSelected="true" @select="selectList3" />
        </div>
        <div slot="content" class="Echarts">
          <div class="zidingyi_box" style="margin-left:5px;width:40px;margin:4px 0" @click="kanbanrightAll">
            <span style="font-size:10px;margin-left:3px">全部</span>
          </div>
          <XRow barWidth="6" :data="top3" xUnit=" " barRight="19%" barLeft="10%" slot="content" barBottom="-5%" barTop="5%" />
        </div>

      </StrokeTitle2>
    </div>
    <div class="content_center">
      <StrokeTitle2 :isCenter="true" title="瓶坯-各生产品项占比" class="float margin" style="width: 32.3%">
        <div class="flex_center" slot="select">
          <ElementRadio v-model="model" :isButton="true" @change="radioChange4" :options="[  {
            value: 'lastMonth', label: '上月' },{value: 'quarter',label: '当季'}]" />
        </div>
        <div slot="content" class="Echarts">
          <div class="zidingyi_box" style="margin-left:5px;width:40px;margin:4px 0" @click="kanbancenter1All">
            <span style="font-size:10px;margin-left:3px">全部</span>
          </div>
          <PieImg legendLeft="24%" legendLabel="个" cirTop="0.3" :isTitle="true" length="5" itemWidth="0.8" cirLeft="-0.02" style="height: calc(100% - 30px)" :data="center1" :img="require('@/assets/images/echarts/7pingpei.png')" slot="content" />
        </div>

      </StrokeTitle2>
      <StrokeTitle2 :isCenter="true" title="瓶盖-各生产品项占比" class="float margin" style="width: 32.3%">
        <div class="flex_center" slot="select">
          <ElementRadio v-model="model" :isButton="true" @change="radioChange5" :options="[  {
            value: 'lastMonth', label: '上月' },{value: 'quarter',label: '当季'}]" />
        </div>
        <div slot="content" class="Echarts">
          <div class="zidingyi_box" style="margin-left:5px;width:40px;margin:4px 0" @click="kanbancenter2All">
            <span style="font-size:10px;margin-left:3px">全部</span>
          </div>
          <PieImg legendLeft="24%" legendLabel="个" cirTop="0.3" :isTitle="true" titleLeft="23.7%" length="5" itemWidth="0.8" cirLeft="-0.02" style="height: calc(100% - 30px)" :data="center2" :img="require('@/assets/images/echarts/7pinggai.png')" slot="content" />
        </div>

      </StrokeTitle2>
      <StrokeTitle2 :isCenter="true" title="商标-各生产品项占比" class="float margin" style="width: 32.4%">
        <div class="flex_center" slot="select">
          <ElementRadio v-model="model" :isButton="true" @change="radioChange6" :options="[  {
            value: 'lastMonth', label: '上月' },{value: 'quarter',label: '当季'}]" />
        </div>
        <div slot="content" class="Echarts">
          <div class="zidingyi_box" style="margin-left:5px;width:40px;margin:4px 0" @click="kanbancenter3All">
            <span style="font-size:10px;margin-left:3px">全部</span>
          </div>
          <PieImg legendLeft="24%" legendLabel="个" cirTop="0.3" :isTitle="true" length="5" itemWidth="0.8" cirLeft="-0.02" style="height: calc(100% - 30px)" :data="center3" :img="require('@/assets/images/echarts/7shangbiao.png')" slot="content" />
        </div>

      </StrokeTitle2>
    </div>
    <div class="content_bottom">
      <StrokeTitle2 title="原物料消耗率分析" class="float margin" style="width: 99%">
        <div class="flex_center" slot="select">
          <!-- <ElementDateSelectMore type="monthrange" @dateSelect="dateSelect"/> -->
          <el-date-picker :editable="false" v-model="bottom1Form.dyjsrq" @input="dateSelect($event)" type="month" value-format="yyyy-MM" placeholder="选择月">
          </el-date-picker>
        </div>
        <MoreColBar :data="bottom1" :xAxisLine="true" :yAxisLine="true" slot="content" :formData="{end:bottom1Form.dyjsrq,
        start:bottom1Form.dyksrq}" />
      </StrokeTitle2>
    </div>
    <AllDialog ref="AllDialog" />
  </div>
</template>

<script>
import {
  Kanbantop,
  Kanbantop2,
  Kanbanright,
  Kanbancenter,
  Kanbanywl,
} from "@/api/echarts/seven/materialsSupplies";
import NormalLine from "@/components/echarts/line/normal.vue";
import PieImg5 from "@/components/echarts/pie/img5.vue";
import StrokeTitle2 from "@/components/myComponents/stroke/title2.vue";
import { list, listPost } from "@/api/dialog/index";
export default {
  components: {
    NormalLine,
    PieImg5,
    StrokeTitle2,
  },
  data() {
    return {
      model: "month",
      selectList: [
        { value: "", label: "全部" },
        { value: "1", label: "选项一" },
      ],
      //占比分析
      top1: [
        { name: "瓶坯", value: 0 },
        { name: "瓶盖", value: 0 },
        { name: "商标", value: 0 },
      ],
      top1Form: {
        jsrq: this.$getLastMonth("e"),
        ksrq: this.$getLastMonth("s"),
        val: 1,
        ggname: "",
      },
      //近半年消耗率趋势
      top2: {},
      top2Form: {
        val: 0,
        ggname: "",
      },
      //生产效率
      top3: [],
      top3Form: {
        jsrq: this.$getLastMonth("e"),
        ksrq: this.$getLastMonth("s"),
        val: 1,
        ggname: "",
        all: "",
      },
      //瓶坯-各生产品项占比
      center1: [],
      center1Form: {
        jsrq: this.$getLastMonth("e"),
        ksrq: this.$getLastMonth("s"),
      },
      //瓶盖-各生产品项占比
      center2: [],
      center2Form: {
        jsrq: this.$getLastMonth("e"),
        ksrq: this.$getLastMonth("s"),
        all: "",
      },
      //商标-各生产品项占比
      center3: [],
      center3Form: {
        jsrq: this.$getLastMonth("e"),
        ksrq: this.$getLastMonth("s"),
        all: "",
      },
      //原物料消耗率分析
      bottom1Form: {
        dyksrq: this.$getLastMonth("s"),
        dyjsrq: this.$getLastMonth("e"),
        all: "",
      },
      //原物料消耗率分析
      bottom1: {
        xData: ["瓶坯", "瓶盖", "商标"],
        yData1: [],
        yData2: [],
        yData3: [],
        yData4: [],
      },
      color: ["blue", "orange", "green", "pink"],
    };
  },
  mounted() {
    this.kanbantop(); //占比分析
    this.getList();
    this.kanbanright(); //生产效率
    this.kanbancenter1(); //瓶坯-各生产品项占比
    this.kanbancenter2(); //瓶盖-各生产品项占比
    this.kanbancenter3(); //商标-各生产品项占比
    this.kanbanywl(); //原物料消耗率分析
  },
  methods: {
     //获取商品列表
    getList() {
      list(
        "/basic/productInfo/listSelect",
        { pageNum: 1, pageSize: 320 },
        "GET"
      ).then((res) => {
        this.top2Form.ggname = res.rows[0].name;
        this.kanbantop2(); //近半年消耗率趋势
      });
    },
    dateSelect(e) {
      this.bottom1Form.dyksrq = this.$serveGetMonth(e, "s");
      this.bottom1Form.dyjsrq = this.$serveGetMonth(e, "e");
      this.kanbanywl();
    },
    //占比分析时间切换
    radioChange1(e) {
      this.top1Form.ksrq = e[0];
      this.top1Form.jsrq = e[1];
      this.kanbantop();
    },
    //占比分析选择器切换
    selectList1(e) {
      this.top1Form.ggname = e;
      if (e == "全部") {
        this.top1Form.val = 1;
      } else {
        this.top1Form.val = 0;
      }
      // this.top1Form.val= 1;
      this.kanbantop();
    },
    //占比分析
    kanbantop() {
      Kanbantop(this.top1Form).then((res) => {
        if (res.code == 200) {
          if (res.data[0] != null) {
            this.top1 = [
              { name: "瓶坯", value: 0 },
              { name: "瓶盖", value: 0 },
              { name: "商标", value: 0 },
            ];
            this.top1[0].value = Number(res.data[0].pp);
            this.top1[1].value = Number(res.data[0].pg);
            this.top1[2].value = Number(res.data[0].sb);
          } else {
            this.top1 = [];
          }
        }
      });
    },
    //近半年消耗率趋势选择器切换
    selectList2(e) {
      this.top2Form.ggname = e;
      if (e == "全部") {
        this.top2Form.val = 1;
      } else {
        this.top2Form.val = 0;
      }
      this.kanbantop2();
    },
    //近半年消耗率趋势
    kanbantop2() {
      Kanbantop2(this.top2Form).then((res) => {
        this.top2 = res.data;
      });
    },
    //生产效率时间切换
    radioChange3(e) {
      this.top3Form.ksrq = e[0];
      this.top3Form.jsrq = e[1];
      this.kanbanright();
    },
    //生产效率选择器切换
    selectList3(e) {
      this.top3Form.ggname = e;
      if (e == "全部") {
        this.top3Form.val = 1;
      } else {
        this.top3Form.val = 0;
      }
      //  this.top3Form.val= 1;
      this.kanbanright();
    },
    //生产效率
    kanbanright() {
      Kanbanright(this.top3Form).then((res) => {
        if (res.code == 200) {
          this.top3 = res.data;
        }
      });
    },
    //生产效率-全部
    kanbanrightAll() {
      let obj = JSON.parse(JSON.stringify(this.top3Form));
      obj.all = "111";
      Kanbanright(obj).then((res) => {
        if (res.code == 200) {
          this.$refs.AllDialog.unit = "";
          this.$refs.AllDialog.right.unit = "";
          this.$refs.AllDialog.tableData.data = res.data;
        }
        this.$refs.AllDialog.dialogTableVisible = true;
      });
    },
    //瓶坯-各生产品项占比时间切换
    radioChange4(e) {
      this.center1Form.ksrq = e[0];
      this.center1Form.jsrq = e[1];
      this.kanbancenter1();
    },
    //瓶坯-各生产品项占比
    kanbancenter1() {
      Kanbancenter(this.center1Form)
        .then((res) => {
          this.center1 = [];
          for (let item of res.pp) {
            let obj = {};
            obj.name = item.name;
            obj.value = item.cp;
            obj.value2 = item.pp;
            this.center1.push(obj);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //瓶坯-各生产品项占比-全部
    kanbancenter1All() {
      let obj = JSON.parse(JSON.stringify(this.center1Form));
      obj.all = "111";
      Kanbancenter(obj)
        .then((res) => {
          let list = [];
          for (let item of res.pp) {
            let obj = {};
            obj.name = item.name;
            obj.value = item.cp;
            obj.value2 = item.pp;
            list.push(obj);
          }
          this.$refs.AllDialog.unit = " 个";
          this.$refs.AllDialog.tableData.data = list;
          this.$refs.AllDialog.dialogTableVisible = true;
          this.$refs.AllDialog.right.unit = "%";
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //瓶盖-各生产品项占比时间切换
    radioChange5(e) {
      this.center2Form.ksrq = e[0];
      this.center2Form.jsrq = e[1];
      this.kanbancenter2();
    },
    //瓶盖-各生产品项占比
    kanbancenter2() {
      Kanbancenter(this.center2Form)
        .then((res) => {
          this.center2 = [];
          for (let item of res.pg) {
            let obj = {};
            obj.name = item.name;
            obj.value = item.cp;
            obj.value2 = item.pg;
            this.center2.push(obj);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //瓶盖-各生产品项占比-全部
    kanbancenter2All() {
      let obj = JSON.parse(JSON.stringify(this.center2Form));
      obj.all = "111";
      Kanbancenter(obj)
        .then((res) => {
          let list = [];
          for (let item of res.pg) {
            let obj = {};
            obj.name = item.name;
            obj.value = item.cp;
            obj.value2 = item.pg;
            list.push(obj);
          }
          this.$refs.AllDialog.unit = " 个";
          this.$refs.AllDialog.tableData.data = list;
          this.$refs.AllDialog.dialogTableVisible = true;
          this.$refs.AllDialog.right.unit = "%";
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //商标-各生产品项占比时间切换
    radioChange6(e) {
      this.center3Form.ksrq = e[0];
      this.center3Form.jsrq = e[1];
      this.kanbancenter3();
    },
    //商标-各生产品项占比
    kanbancenter3() {
      Kanbancenter(this.center3Form)
        .then((res) => {
          this.center3 = [];
          for (let item of res.sb) {
            let obj = {};
            obj.name = item.name;
            obj.value = item.cp;
            obj.value2 = item.sb;
            this.center3.push(obj);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //商标-各生产品项占比-全部
    kanbancenter3All() {
      let obj = JSON.parse(JSON.stringify(this.center3Form));
      obj.all = "111";
      Kanbancenter(obj)
        .then((res) => {
          let list = [];
          for (let item of res.sb) {
            let obj = {};
            obj.name = item.name;
            obj.value = item.cp;
            obj.value2 = item.sb;
            list.push(obj);
          }
          this.$refs.AllDialog.unit = " 个";
          this.$refs.AllDialog.tableData.data = list;
          this.$refs.AllDialog.dialogTableVisible = true;
          this.$refs.AllDialog.right.unit = "%";
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //原物料消耗率分析
    kanbanywl() {
      this.bottom1 = {
        xData: ["瓶坯", "瓶盖", "商标"],
        yData1: [],
        yData2: [],
        yData3: [],
        yData4: [],
      };
      Kanbanywl(this.bottom1Form).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.bottom1 = {
            xData: ["瓶坯", "瓶盖", "商标"],
            yData1: [
              Number(res.data[0].pp),
              Number(res.data[0].pg),
              Number(res.data[0].sb),
            ],
            yData2: [
              Number(res.data[1].pp),
              Number(res.data[1].pg),
              Number(res.data[1].sb),
            ],
            yData3: [
              Number(res.data[2].pp),
              Number(res.data[2].pg),
              Number(res.data[2].sb),
            ],
          };
        }
      });
    },

    radioChange() {},
  },
};
</script>


<style lang="scss" scoped>
.seven_content {
  z-index: 10;
  background: #093b76;
  width: 100%;
  height: calc(100vh - 183px);
  overflow: auto;
  overflow-x: hidden;
  padding-bottom: 5px;
  // overflow: hidden;
  .content_top,
  .content_bottom,
  .content_center {
    //   background: res;
    width: 100%;
    // height: 34.8%;
    height: 35.8%;
  }
  .content_top {
    height: 35.8%;
  }
  .content_bottom {
    // height: 28.9%;
    height: 36.2%;
  }
  .cntj_box {
    width: 100%;
    height: 100%;
    padding: 15px;
    .cntj_item {
      width: 24.5%;
      background: linear-gradient(
        180deg,
        rgba(44, 119, 187, 0.5) 0%,
        rgba(18, 81, 141, 0.5) 100%
      );
      border: 1px solid #2489ee71;
      height: 100%;
      padding: 15px;
      nav {
        font-size: 20px;
        background: rgba(35, 107, 173, 0.7);
        height: 32%;
        width: 100%;
        text-align: center;
      }
      .cntj_item_content {
        width: 100%;
        height: 66%;

        margin-top: 2%;
        .cntj_item_content_item {
          width: 49%;
          background-image: url("~@/assets/images/echarts/zhuangshi.png");
          background-size: 100% 100%;
          height: 100%;
          background-color: rgba(35, 107, 173, 0.7);
          .number {
            font-size: 37px;
          }
          .unit {
            font-size: 17px;
            margin-top: 3%;
            color: #ffffff;
          }
        }
      }
    }
  }
  .Echarts {
    height: calc(100% - 1px);
    width: 100%;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    // background: red;
  }
  .center_echarts {
    height: 180px;
  }
}
</style>